import React from 'react';
import Lottie from 'lottie-react';
import loadingAnimation from '../assets/loading.json'; // 下载的动画文件

const LoadingScreen = () => {
    return (
        <div style={styles.container}>
            <div style={styles.box}>
                <Lottie animationData={loadingAnimation} loop={true} style={styles.lottie} />
                <p style={styles.text}>正在加载，请稍候...</p>
            </div>
        </div>
    );
};

const styles = {
    container: {
        position: 'fixed',
        inset: 0,
        background: 'linear-gradient(135deg, #f0f2f5, #d6e4ff)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 9999
    },
    box: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
    },
    lottie: {
        width: 180,
        height: 180
    },
    text: {
        marginTop: 16,
        fontSize: 18,
        color: '#555'
    }
};

export default LoadingScreen;
